<template>
    <div>
        <div style="background: #fff;">
            <x-input placeholder-align="right" text-align="right" placeholder="请输入真实姓名" v-model="form.username">
                <p slot="label"><span class="ep-required">*</span><span :class="error.username?'ep-error':''">姓名</span></p>
            </x-input>
            <popup-picker show-name="true" placeholder="请选择" :data="codeType" v-model="form.cardtype" :columns="1">
                <p slot="title"><span class="ep-required">*</span><span :class="error.cardtype?'ep-error':''">证件类型</span></p>
            </popup-picker>
            <x-input placeholder-align="right" text-align="right" placeholder="请输入身份证号" v-model="form.usernumber">
                <p slot="label"><span class="ep-required">*</span><span :class="error.usernumber?'ep-error':''">身份证号</span></p>
            </x-input>
            <x-input placeholder-align="right" text-align="right" placeholder="请输入手机号" v-model="form.phone">
                <p slot="label"><span class="ep-required">*</span><span :class="error.phone?'ep-error':''">手机号</span></p>
            </x-input>
            <x-input placeholder-align="right" text-align="right" placeholder="请输入密码" v-model="form.password">
                <p slot="label"><span class="ep-required">*</span><span :class="error.password?'ep-error':''">密码</span></p>
            </x-input>
            <x-input placeholder-align="right" text-align="right" placeholder="请确认密码" v-model="form.confirmPassword">
                <p slot="label"><span class="ep-required">*</span><span :class="error.confirmPassword?'ep-error':''">确认密码</span></p>
            </x-input>
            <div class="ep-item">
                <div class="ep-yzm">
                    <span style="width:100px;"><span class="ep-required">*</span>验证码</span>
                    <input type="tel" maxlength="11" placeholder="请输入验证码" v-model="yzm"/>
                    <a @click="getCode" class="ep-yzm-code" :class="countdown==60?'sendcode':'sendcodes'">获取验证码</a>
                </div>
            </div>
        </div>
        <div style="padding:20px;">
            <ep-button>注册</ep-button>
        </div>
    </div>
</template>

<script type="es6">
    // import { XInput,CellBox,Icon,PopupPicker } from 'vux'

    export default {
        // components: {
        //     XInput,
        //     CellBox,
        //     Icon,
        //     PopupPicker
        // },
        data() {
            return {
                yzm:'',
                countdown: 60,
                codeType:[],
                form:{
                    username:"",
                    password:"",
                    confirmPassword:"",
                    usernumber:"",
                    phone:"",
                    cardtype:""
                },
                error:{
                    username:0,
                    password:0,
                    confirmPassword:0,
                    usernumber:0,
                    phone:0,
                    cardtype:0
                }
            }
        },
        created() {
            this.getList();
        },
        methods: {
            /**
             * 获取验证码
             */
            getCode(){
                if (this.marked == "获取验证码") {
                    if (!this.form.phone) {
                        this.$toast({
                            message: "手机号不能为空",
                            duration: 3000
                        });
                        return false;
                    }
                    if (!this.utils.isPhone(this.form.phone)) {
                        this.$toast({
                            message: "手机号格式不正确",
                            duration: 3000
                        });
                        return false;
                    }
                    this.setTime();
                    this.$http.post("/zheLiOffice/smsCode/zheLiOffice", {}, {
                        params: {
                            phone: this.des.Encrypt(this.data.phone),
                            access_token: sessionStorage.getItem("token")
                        }
                    }).then(res => {
                    })
                }
            },
            /**
             * 获取列表
             */
            getList() {
                let params ={
                    serviceId:'interfaceManagement',
                    parentId:this.$route.query.id || ''
                }
                this.$api.commonPost('/service/serviceIdFromJson',params).then(res=>{
                    if(res.success){
                        let data = res.body || [];
                        this.list = data;
                    }
                })
            },
            /**
             * 跳转
             */
            goTo(url){
                window.location.href=url;
            }
        }
    }
</script>

<style lang="less" scoped>
    .ep-yzm{
        display: flex;
        padding: 10px 15px;
        align-items: center;
        input {
            flex:1;
            border: none;
            outline: none;
            text-align: right;
            margin-right:10px;
        }
    }
    .ep-item{
        position:relative;
    }
    .ep-item:before{
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        height: 1px;
        border-top: 1px solid #ededed;
        color: #ededed;
        left: 15px;
    }
    .sendcode {
        color: #CACACA;
    }

    .sendcodes {
        color: #FFFFFF;
        background: #CACACA;
    }
    .ep-yzm-code{
        padding:4px 2px;
        border: 1px solid #CACACA;
        border-radius: 4px;
        font-size:14px;
        width: 120px;
        text-align: center;
        font-weight: 500;
    }
</style>
